<template>
  <div class="music">
    <audio :src="url" controls autoplay></audio>
   
  </div>
</template>

<script>
import { BfApi } from "../../request/api";
export default {
  data() {
    return {
      url: "",
    };
  },
  props: {
    ids: {
      type: Number,
      default() {
        return Number;
      },
    },
  },
//   created() {
//     console.log(this.ids);
//     BfApi(this.ids).then((res) => {
//       console.log(res);
//       this.url = res.data.data[0].url;
//       console.log(this.url);
//     });
//   },
  watch: {
    ids: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        if(newValue !== oldValue){
             BfApi(newValue).then((res) => {
      console.log(res);
      this.url = res.data.data[0].url;
    //   console.log(this.url);
    });
        }
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import ".././../assets/base";
.music {
  position: fixed;
  bottom: 20px;
  width: 300px;
  height: 60px;
  /* background-color: aqua; */

}
</style>